<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户添加</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="/layer/layer.js"></script>
</head>
<body>

<div class="container" id="userAdd">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <form class="form-horizontal" action="" method="post">
        <input name="id" hidden>
        <h2 class="form-signin-heading" style="color: black">添加用户</h2>
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="name" placeholder=张三 v-model="userInfo.name">
            </div>
        </div>

        <div class="form-group">
            <label for="loginName" class="col-sm-2 control-label">登录名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="loginName" placeholder="admin"
                       v-model="userInfo.loginName" onblur="checkLoginName()">
            </div>
            <span id="nameCheckInfo" style="color: red"></span>
        </div>

        <div class="form-group">
            <label for="loginPassword" class="col-sm-2 control-label">登录密码</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="loginPassword" placeholder="123456"
                       v-model="userInfo.loginPassword"
                >
            </div>
        </div>

        <div class="form-group">
            <label for="role" class="col-sm-2 control-label">角色身份</label>
            <div class="col-sm-10">
                <select id="role" v-model="userInfo.roleId" class="form-control">

                    <option v-for="r in roleList" v-bind:value="r.id">{{r.name}}</option>
                    <!--         r in roleList  代表替代这个名字           -->
                </select>
            </div>
        </div>
        <div>
            <button class="btn btn-lg btn-primary btn-block" type="button"
                    @click="addUser()" style="width: 100%">提交
            </button>
        </div>
    </form>
</div>


<script>
    new Vue({
        el: "#userAdd",
        data: {
            userInfo: {},
            roleList: []
        },
        created() {   //创建
            this.UserInfo();
        },
        methods: {
            //角色身份返现
            UserInfo() {
                var vm = this;
                $.post("/role/list", {}, function (response) {
                    if (response.code == 200) {
                        vm.roleList = response.data;
                    }
                })
            },
            //添加用户
            addUser() {
                var vm = this;
                $.post("/user/add", vm.userInfo, function (response) {
                    if (response.code == 200) {
                        layer.msg('提交成功！', {
                            time: 1000,
                            end: function () {
                                parent.layer.close(parent.layer.getFrameIndex(window.name)),
                                    vm.loadData();
                                //    存在小页面的话，该语句是关闭页面的
                            }
                        })
                    } else {
                        layer.msg('提交失败！', {
                            time: 1000,
                        })
                    }
                })
            }
        },
    })
</script>

</body>
</html>